<template>
	<view class="h-100 full-screen uni-bg-gray">
		<z-paging>
			<view class="page">
				<template v-if="myDataInfo.financialAccountType == 1">
					<view class="with-box br-12">
						<view class="inner-wrapper">
							<view class="left flex flex-direction justify-center">
								<view class="amt-num text-bold">
									<text class="amt-tip">¥</text>{{myDataInfo.pendingBalanceAmt}}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">累计本金入账金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
						</view>
						<view class="inner-wrapper">
							<view class="left flex flex-direction justify-center">
								<view class="amt-num">
									<text class="amt-tip">¥</text>{{ myDataInfo.waitSettleBalanceAmt }}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">待结算本金金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
							<view class="right flex flex-direction justify-center">
								<view class="amt-num">
									<text class="amt-tip">¥</text>{{ myDataInfo.progressingWithdrawAmt }}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">提现中本金金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="with-box sub-box br-12">
						<view class="inner-wrapper">
							<view class="left flex flex-direction justify-center">
								<view class="amt-num text-bold">
									<text class="amt-tip">¥</text>{{myDataInfo.subsidyAmt}}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">可提补贴金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
							<view class="right flex flex-direction justify-center amt-btn-wrapper">
								<view class="amt-btn" @click="toWithdraw(2)">去提现</view>
							</view>
						</view>
						<view class="inner-wrapper">
							<view class="left flex flex-direction justify-center">
								<view class="amt-num">
									<text class="amt-tip">¥</text>{{ myDataInfo.waitSettleSubsidyAmt }}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">待结算补贴金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
							<view class="right flex flex-direction justify-center">
								<view class="amt-num">
									<text class="amt-tip">¥</text>{{ myDataInfo.pendingSubsidyAmt }}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">待入账补贴金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="with-box br-12">
						<view class="inner-wrapper">
							<view class="left flex flex-direction justify-center">
								<view class="amt-num text-bold">
									<text class="amt-tip">¥</text>{{myDataInfo.balanceAmt}}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">可提本金金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
							<view class="right flex flex-direction justify-center amt-btn-wrapper">
								<view class="amt-btn" @click="toWithdraw(1)">去提现</view>
							</view>
						</view>
						<view class="inner-wrapper">
							<view class="left flex flex-direction justify-center">
								<view class="amt-num">
									<text class="amt-tip">¥</text>{{ myDataInfo.waitSettleBalanceAmt }}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">待结算本金金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
							<view class="right flex flex-direction justify-center">
								<view class="amt-num">
									<text class="amt-tip">¥</text>{{ myDataInfo.pendingBalanceAmt }}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">待入账本金金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="with-box sub-box br-12">
						<view class="inner-wrapper">
							<view class="left flex flex-direction justify-center">
								<view class="amt-num text-bold">
									<text class="amt-tip">¥</text>{{myDataInfo.subsidyAmt}}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">可提补贴金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
							<view class="right flex flex-direction justify-center amt-btn-wrapper">
								<view class="amt-btn" @click="toWithdraw(2)">去提现</view>
							</view>
						</view>
						<view class="inner-wrapper">
							<view class="left flex flex-direction justify-center">
								<view class="amt-num">
									<text class="amt-tip">¥</text>{{ myDataInfo.waitSettleSubsidyAmt }}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">待结算补贴金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
							<view class="right flex flex-direction justify-center">
								<view class="amt-num">
									<text class="amt-tip">¥</text>{{ myDataInfo.pendingSubsidyAmt }}
								</view>
								<view class="flex item-center" @click="openPop">
									<view class="amt-text">待入账补贴金额（元）</view>
									<image src="@/wallet/static/tip.svg" class="tip-icon"></image>
								</view>
							</view>
						</view>
					</view>
				</template>
				<!-- <view class="flex justify-between item-center mx-16 pb-12 text-white">
					<view class="flex-col">
						<view class="fs-14 leading-20">500.00</view>
						<view class="fs-12 leading-17">今日预估佣金</view>
					</view>
					<view class="w-1 h-9 bg-white"></view>
					<view class="flex-col">
						<view class="fs-14 leading-20">500.00</view>
						<view class="fs-12 leading-17">本月预估佣金</view>
					</view>
					<view class="w-1 h-9 bg-white"></view>
					<view class="flex-col">
						<view class="fs-14 leading-20">500.00</view>
						<view class="fs-12 leading-17">累计佣金</view>
					</view>
				</view> -->
				<view class="bg-white br-12">
					<view class="pl-20 pr-14 py-20 leading-20 flex justify-between" @click="toWithdrawRecord">
						<text class="text-color-regular fs-14 font-normal">提现记录</text>
						<image class="w-6 h-11" src="@/static/svg/arrow-stroke.svg"></image>
					</view>
					<view class="h-1 bg-default"></view>
					<view class="pl-20 pr-14 py-20 leading-20 flex justify-between" @click="toFundDetail">
						<text class="text-color-regular fs-14 font-normal">资金明细</text>
						<image class="w-6 h-11" src="@/static/svg/arrow-stroke.svg"></image>
					</view>
					<!-- <view class="my-16 mx-20">
						<view class="text-color-regular fs-14 font-semibold mb-8">温馨提示</view>
						<view class="leading-17 text-color-regular fs-12 font-normal">这里是提现说明</view>
					</view> -->
				</view>
				<view v-if="myDataInfo.financialAccountType == 1" class="with-info">
					<view>*订单核销完成次日结算商品本金，补贴，本金自动提现至您的结算卡，T+1日到账。</view>
					<view>*补贴金额系统于每月3日生成上月补贴账单，账单生成后可申请提现。</view>
				</view>
				<view v-else class="with-info">*订单核销完成次日结算商品本金、补贴金额系统于每月3日生成上月本金&补贴账单，账单生成后可申请提现。</view>
			</view>
		</z-paging>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="pop-box">
				<view class="pop-title">资金说明</view>
				<view v-if="myDataInfo.financialAccountType == 2" class="text-wrapper">
					<view class="text-title">可提本金金额</view>
					<view>已入账，可提现的本金金额</view>
				</view>
				<view class="text-wrapper">
					<view class="text-title">待结算本金金额</view>
					<view>已核销，未结算的本金金额</view>
				</view>
				<view class="text-wrapper">
					<view class="text-title">待入账本金金额</view>
					<view>已结算，待入账到可提的本金金额</view>
				</view>
				<view v-if="myDataInfo.financialAccountType == 1" class="text-wrapper">
					<view class="text-title">提现中本金金额</view>
					<view>已结算，自动提现中的本金金额总和</view>
				</view>
				<view class="text-wrapper">
					<view class="text-title">可提补贴金额</view>
					<view>已生成月度账单，可提现的补贴金额</view>
				</view>
				<view class="text-wrapper">
					<view class="text-title">待结算补贴金额</view>
					<view>已核销，未结算的补贴金额</view>
				</view>
				<view class="text-wrapper">
					<view class="text-title">待入账补贴金额</view>
					<view>已结算，未计入月度账单的补贴金额</view>
				</view>
				<view class="pop-btn" @click="closePop">关闭</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup name="WithdrawInfo">
	import { myPageApi } from '@/api/index.js'
	import {ref,onBeforeUnmount,getCurrentInstance} from 'vue'
	import {onLoad} from '@dcloudio/uni-app';
	const myDataInfo = ref({})
	const getOpenerEventChannel = ref(null)
	const popup = ref(null)
	const queryList = () => {
		// if (userStore.isAgent || userStore.isMerchant) {
		myPageApi().then(res => {
			myDataInfo.value = res
		})
	}
	const goBack = () => uni.navigateBack()
	
	const toWithdraw = (type) => {
		uni.navigateTo({
			url: `/wallet/pages/withdraw/withdraw?type=${type}&financialAccountType=${myDataInfo.value.financialAccountType}`,
			events: {
				reIndex: (data) => {
					// console.log(data,'drr')
					queryList()
				}
			},
		})
	}
	
	const toWithdrawRecord = () => {
		uni.navigateTo({
			url: '/wallet/pages/withdraw/withdraw-record'
		})
	}
	
	const toFundDetail = () => {
		uni.navigateTo({
			url: '/wallet/pages/withdraw/fund-detail'
		})
	}
	const preRefresh = () => {
		// console.log('rrr',getOpenerEventChannel.value)
		getOpenerEventChannel.value.emit('reIndex','refresh')
	}
	const openPop = () => {
		popup.value.open()
	}
	const closePop = () => {
		popup.value.close()
	}
	onLoad(() => {
		queryList()
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel()
	})
	onBeforeUnmount(() => {
		preRefresh()
	})
</script>
<style scoped lang="scss">
	.page{
		padding: 32rpx;
	}
	.h-100{
		min-height: 100vh;
	}
	.with-info{
		margin-top: 32rpx;
		font-family: PingFang SC;
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0px;
		text-align: left;
		color: #333333;
	}
	.br-12{
		border-radius: 24rpx;
	}
	.with-box{
		background-color: #FA4543;
		// background-repeat: no-repeat;
		// background-image: url("/wallet/static/icon-money.png");
		// background-size: cover;
		padding: 40rpx 32rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 16rpx;
		color: #ffffff;
		.inner-wrapper{
			display: flex;
			justify-content: space-between;
			width: 100%;
			&:not(:last-child){
				margin-bottom: 56rpx;
			}
			.amt-num{
				font-size: 48rpx;
				.amt-tip{
					font-size: 28rpx;
				}
			}
			.amt-text{
				font-size: 24rpx;
			}
			.tip-icon{
				width: 24rpx;
				height: 24rpx;
			}
			.left{
				width: 50%;
			}
			.right{
				&.amt-btn-wrapper{
					border: none;
					align-items: flex-end;
				}
				width: 50%;
				border-left: 2rpx solid rgba(255, 255, 255, 0.4);
				padding-left: 42rpx;
			}
			.amt-btn{
				margin-top: 20rpx;
				border-radius: 32rpx;
				border: 2rpx solid #FFFFFF;
				padding: 8rpx 32rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 600;
				width: fit-content;
			}
		}
	}
	.with-amt-box{
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0 20px;
		.with-title{
			font-family: PingFang SC;
			font-size: 12px;
			font-weight: 400;
			line-height: 17px;
			color: rgba(255, 255, 255, 1);
		}
		.amt-num{
			font-size: 28px;
			font-weight: 700;
			line-height: 30px;
			color: rgba(255, 255, 255, 1);
			margin-top: 10px;
		}
	}
	.sub-box{
		background-color: #EFBA73;
	}
	.bg-default{
		background-color: rgba(245, 245, 245, 1);
	}
	.pop-box {
		width: 570rpx;
		padding: 32rpx;
		// margin: 90rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		color: #333333;
	
		.pop-title {
			font-weight: 600;
			font-size: 32rpx;
			text-align: center;
			margin-bottom: 16rpx;
		}
	
		.text-wrapper {
			.text-title{
				font-weight: 600;
				margin-bottom: 8rpx;
			}
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 48rpx;
		}
	}
	
	.pop-btn {
		border-radius: 16rpx;
		border: 2rpx solid #FA4543;
		font-size: 28rpx;
		padding: 8rpx 0;
		color: #FA4543;
		width: 100%;
		text-align: center;
	}
</style>